import React from 'react';
import './index.less';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import {Toast,Modal,Badge,Icon,List, InputItem,Picker, Button,Checkbox, Flex} from 'antd-mobile';
import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import { devUrl} from 'SERVICE/xhr/config';

const alert = Modal.alert;
const PickerItem = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

export default class My extends React.Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props) {
        super(props);
        const byStagesData = [
          	{value:'3月',label:'3月'},
          	{value:'6月',label:'6月'},
          	{value:'9月',label:'9月'},
          	{value:'12月',label:'12月'},
          	{value:'24月',label:'24月'},
          	{value:'36月',label:'36月'},
          
        ]
        
        const outletsData = [
          	{value:'交通银行上海奉贤支行',label:'交通银行上海奉贤支行'},
          	{value:'交通银行上海闵行支行',label:'交通银行上海闵行支行'},
          	{value:'交通银行上海浦东支行',label:'交通银行上海浦东支行'},
          	{value:'交通银行上海张江支行',label:'交通银行上海张江支行'}
        ]
        this.state = {
          btnActive:'0',
          byStagesData: byStagesData,
          outletsData: outletsData,
          qishuChecked: byStagesData[0]['value'],
          bankOutletsChecked: outletsData[0]['value'],
          checkedVal:'',
          infoData:{}
        }
    }

    componentWillMount() {
        

    }

	
	jumpToAccountSecret = () => {
		native.call({
        	'fun':'openAccountList'
    	})
	}
	
	backs = () => {
	 	this.context.router.push({
            pathname: '/Home'
        })
	 	return false;
	}
	
	onMonthsChange = (val, data) => {
	    let colNum = 1;
	    const d = [...this.state.byStagesData];
    	const asyncValue = [...val];
	    this.setState({
	      data: d,
	      qishuChecked: val,
	      cols: colNum,
	      asyncValue,
	    });
	};
	
	onBanksChange = (val, data) => {
	    let colNum = 1;
	    const d = [...this.state.byStagesData];
    	const asyncValue = [...val];
	    this.setState({
	      data: d,
	      bankOutletsChecked: val,
	      cols: colNum,
	      asyncValue,
	    });
	};
	
	
	
	viewDetail = () => {
		this.context.router.push({
			pathname: '/Schedules',
			query:{
            	itemNums: 3
            }
		})
	}
	
	jumpToResultPage = (className) => {
		let infoData = {};
		if(className.indexOf('disabledBtn') >-1){
			return false;
		}else{
			this.context.router.push({
				pathname: '/LoansResult'
			})
		}
		
		//保存信息
		
		
	}
	
	jumpToAgreement = (path) => {
		//选期数后才跳转
		let urlPath = '/'+path;
		this.context.router.push({
			pathname: urlPath
		})
	}
	
	radioToggleAction = () => {
		let {btnActive} = this.state;
		let setData = {};
		if(btnActive == '1'){
			
			setData['btnActive'] = '0';
		}else{
			setData['btnActive'] = '1';
		}
		this.setState({
			...setData
		})
	}
	
    render() {
    	let {btnActive,byStagesData,outletsData,qishuChecked, bankOutletsChecked} = this.state;
    	let _this = this;
    	let btnDisable = btnActive=='1'?'':'disabledBtn';
    	let iconChecked = btnActive=='1'?'icon_radio_checked':'icon_circle';
    	
        return(
        	
            <div className="LoansApply" style={{
            	background:'#e6edf2',
            	height:'100%'
            }}>
				<CommonHeader 
					name='房抵贷申请'					
					leftContentTitle="@back" 
					leftContent='返回'				
				/>
				<div style={{height:'.9rem'}}></div>
				
				
				
				<section className="lineSection">
					
					<InputItem

			            type="digit"
			            placeholder="40000"
			          >借多少</InputItem>
					
					<Picker 
						data={byStagesData}
						extra = {qishuChecked}
						cols="1"  
						onOk = {(v, byStagesData) =>this.onMonthsChange(v,byStagesData)}
					>
			          <PickerItem arrow="horizontal" >借多久</PickerItem>
				       
				        
			        </Picker>
					 <InputItem
			            value="百分之8.05"
			            editable={false}
			          >当前年利率</InputItem>
					
					<p className="perLine">
						<div className="lineline lineLabel">还款计划</div>
						<div className="lineline lineInput"></div>
						<div className="lineline lineArrow fontBlue" onClick={this.viewDetail.bind(this)}> 查看详情 </div>
					</p>
					
					
					<Picker 
						data={outletsData}
						extra = {bankOutletsChecked}
						cols="1"  
						onOk = {(v,outletsData) =>this.onBanksChange(v,outletsData)}
					>
			          <PickerItem arrow="horizontal" >受理网点</PickerItem>
				       
				        
			        </Picker>

				</section>
				
				<section className="agree_section" onClick={this.radioToggleAction.bind(this)}>
					<div style={{
						width:'.4rem',
						height:'.4rem',
						marginTop: '.1rem',
						marginRight:'.1rem',
						background:'url(./imgs/'+iconChecked+'.png) no-repeat center/100%'
					}}> 
					
					</div>
					<div className="agreeText">
						我已阅读并同意
						<a  className="agreeText fontBlue" href="javascript:;"
							onClick={this.jumpToAgreement.bind(this, 'AgreementPage')}>
							《个人信息查询及提供授权书》
						</a>
					</div>
				
				</section>
				{/*<div id="applyBtn" className={btnDisable} onClick ={this.jumpToResultPage.bind(this,btnDisable)}>确认</div>*/}
                <div className="btnGroup-one">
                    <Button type="primary" className={`btnGroup-one-btn ${btnDisable}`}
                            onClick={this.jumpToResultPage.bind(this,btnDisable)}>确认</Button>
                </div>
	            

            </div>
        );
    }
}